<script lang="jsx" setup>
import { ref, watch } from 'vue';
import Form from '@/components/common/form.vue';

const props = defineProps({
  formList: {
    type: Array,
    default: () => {}
  },
  isSearch: {
    type: Boolean,
    default: true
  }
});
const emit = defineEmits(['search', 'reset']);
const model = defineModel('searchParams', { required: false, type: Object });

const formRef = ref(null);

// 创建响应式的formList，以便能够响应外部传入的formList变化
const formListRef = ref(
  props.formList.map(item => {
    return {
      ...item,
      clear: item.clear !== undefined ? item.clear : true
    };
  })
);

// 监听props.formList变化，更新内部的formListRef
watch(
  () => props.formList,
  (newFormList) => {
    formListRef.value = newFormList.map(item => {
      return {
        ...item,
        clear: item.clear !== undefined ? item.clear : true
      };
    });
  },
  {
    deep: true
  }
);

function search() {
  emit('search', model.value);
}

function formReset() {
  formRef.value.reset();
}

function reset() {
  emit('reset', model.value);
}

defineExpose({
  formReset
});
</script>

<template>
  <ACard :title="null" :bordered="false" class="search-card card-wrapper">
    <Form
      ref="formRef"
      v-model:model="model"
      :form-list="formListRef"
      :is-search="isSearch"
      @search="search"
      @reset="reset"
    >
      <template #search>
        <slot name="search"></slot>
      </template>
      <template #other>
        <slot name="other"></slot>
      </template>
    </Form>
  </ACard>
</template>

<style lang="scss" scoped>
:deep(.mini-btn) {
  font-size: 14px !important;
  height: 32px !important;
  padding: 4px 15px !important;
}

:deep(.mini-btn .ml-3px) {
  margin-left: 6px !important;
}

:deep(.ant-form-item-label label) {
  font-size: 16px !important;
}

:deep(.min-form-control) {
  font-size: 15px !important;
  height: 32px !important;
}

:deep(.ant-select) {
  font-size: 14px !important;
}
</style>
